<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html>
<head>
	<title>欢迎注册</title>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" href="/css/regist.css"/>
	<script type="text/javascript" src="/js/ajax.js"></script>
	<script>
		function checkForm(){
			var flag = true;
			//非空校验
			flag = checkNull("username", "用户名不能为空") && flag;
			flag = checkNull("password", "密码不能为空") && flag;
			flag = checkNull("password2", "确认密码不能为空") && flag;
			flag = checkNull("nickname", "昵称不能为空") && flag;
			flag = checkNull("email", "邮箱不能为空") && flag;
			flag = checkNull("valistr", "验证码不能为空") && flag;
			
			//两次密码是否一致
			flag = checkPassword("password", "两次密码不一致") && flag;
			//邮箱格式
			flag = checkEmail("email", "邮箱格式不正确") && flag;

			return flag;
		
		}
		
		//校验两次密码
		function checkPassword(name, msg){
			var psw1 = document.getElementsByName(name)[0].value;
			var psw2 = document.getElementsByName(name+"2")[0].value;

			checkNull(name+"2", "确认密码不能为空");
			if(psw1 != "" && psw2 != "" && psw1 != psw2){
				setMsg(name+"2", msg);
				return false;
			}
			return true;
		}
		
		//校验邮箱格式
		function checkEmail(name, msg){
			var email = document.getElementsByName(name)[0].value;
			var reg = /^\w+@\w+(\.\w+)+$/;
			//setMsg(name, "");
			checkNull(name, "邮箱不能为空");
			if(email != "" && !reg.test(email)){
				setMsg(name, msg);
				return false;
			}
			return true;
		}
		
		
		//检查输入项是否为空
		function checkNull(name, msg){
			var value = document.getElementsByName(name)[0].value;
			setMsg(name, "");
			if(value == ""){
				setMsg(name, msg);
				return false;
			}
			return true;
		}
		
		//设置错误提示消息
		function setMsg(name, msg){
			document.getElementById(name+"_msg").innerHTML = "<font style='color: red; font-size: 14px;'>"+msg+"</font>";
		}

	</script>
</head>
<body>
	<h1>欢迎注册</h1>
	<form  method="POST" action="save.action" onsubmit="return checkForm()">
		<table>
			<tr>
				<td class="tds" colspan="2" style="color:red; text-align: center;">
					${errorInfo}
				</td>
			</tr>
			<tr>
				<td class="tds">用户名：</td>
				<td><input type="text" name="username" value="${ param.username }" >
					<span id="username_msg"></span>
				</td>
			</tr>
			<tr>
				<td class="tds">密码：</td>
				<td><input type="password" name="password"  onblur="checkNull('password', '密码不能为空')">
					<span id="password_msg"></span>
				</td>
			</tr>
			<tr>
				<td class="tds">确认密码：</td>
				<td><input type="password" name="password2"  onblur="checkPassword('password', '两次密码不一致')">
					<span id="password2_msg"></span>
				</td>
			</tr>
			<tr>
				<td class="tds">昵称：</td>
				<td><input type="text" name="nickname"  value="${ param.nickname }"  onblur="checkNull('nickname', '昵称不能为空')">
					<span id="nickname_msg"></span>
				</td>
			</tr>
			<tr>
				<td class="tds">邮箱：</td>
				<td><input type="text" name="email"  value="${ param.email }"  onblur="checkEmail('email', '邮箱格式不正确')">
					<span id="email_msg"></span>
				</td>
			</tr>
			<tr>
				<td colspan="2" style="text-align: center;">
					<input type="submit" value="注册用户" name="submit"/>
				</td>
			</tr>
		</table>
	</form>
</body>
</html>
